<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>图书列表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content=" text/html;charset=utf-8">
<link rel="stylesheet" type="text/css"
	href='<c:url value="/uikit-2.25.0/css/uikit.min.css"/>'>

	
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.lazyload.min.js"></script>
<script type="text/javascript"
	src='<c:url value="/uikit-2.25.0/js/uikit.min.js"/>'></script>

<script type="text/javascript">
	$(function() {
		$(".lazy").lazyload();
	})
</script>

	
	
	
<style type="text/css">
body {
	font-size: 10px;
}

.icon {
	margin: 25px;
	width: 160px;
	height: 214px;
	text-align: center;
	float: left;
	paddding: 5px;
	border: 2px solid gray;;
	position: relative;
}

img {
	wdith: 130px;
	height: 140px;
	margin: 4px auto;
}
.addcart{
	display: block;
   	 float: left;
   	 height: 35px;
   	 font-size: 18px;
     line-height: 35px;
     margin-left: 36px; 
     color:#F89D9D;
}

i{
	position: absolute;
    top: 186px;
    left: 22px;
    display: block;
    width: 20px;
    height: 20px;
    background-position: 0 -210px;
	background: url(<c:url value="/images/sprite.png"/>) no-repeat;
}
</style>
 <script type="text/javascript">
		$(function (){
			$("#partCart").click(function(){
				$.get($(this).attr('name'),function(data){
					if(data){
						
					}
				})
			})
		})
</script>
</head>
<body>
	<c:forEach items="${bookLists }" var="book">
		<div class="icon">
			<a href="<c:url value='/bookServlet?method=findByIdBook&bid=${book.bid }'/>"> <img class="lazy" border="0" data-original='<c:url value="/${ book.image}"/>'/>
			</a> <br /> 
			<a class="uk-button uk-text-muted" href="<c:url value='/bookServlet?method=findByIdBook&bid=${book.bid }'/>">${ book.bname}</a><br>
           <button id="partCart"  class="uk-button addcart" data-uk-modal="{target:'#my-id'}" name="<c:url value='/cartServlet?method=partAddCart&bid=${ book.bid }&count=1'/>" class="" style="text-decoration: none;background-color:white">加入购物车</button>
		   <i></i>
			<!-- 模态对话框 -->
			<div id="my-id" class="uk-modal">
				<div class="uk-modal-dialog">
					<a class="uk-modal-close uk-close"></a> 
					 添加成功,请不要重复添加添加成功~
				</div>
			</div>
			
			
		</div>
	</c:forEach>

</body>

</html>

